import { Button, Checkbox, Form, Input, message } from 'antd'
import React from 'react'
import LoginImg from '../../assets/login2.jpeg'
import './index.scss'
// 导入store
import { useStore } from '../../store/index'
// 引入跳转
import { useNavigate } from 'react-router-dom'

function Login() {
  const { loginStore } = useStore()
  const Navigate = useNavigate()

  async function onFinish (values) {
    console.log('Success:', values)
    // 13544467890
    let {mobile, code} = values
    // code 246810
    await loginStore.getToken({mobile, code})
    // 跳转首页
    Navigate('/', {replace: true})
    message.success('登录成功')
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  return (
    <div className="login">
      <img className="LoginImg" src={LoginImg} alt=""></img>
      <div className="loginBox">
        <div className="title">登录</div>
        <div className="loginInfo">
          <Form
            validateTrigger={['onBlur', 'onChange']}
            name="basic"
            initialValues={{
              remember: true,
              mobile: '13811111111',
              code: '246810'
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              name="mobile"
              rules={[
                { required: true, message: '请输入手机号' },
                {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '手机号格式不正确',
                    validateTrigger: "onBlur"
                }
              ]}
            >
              <Input placeholder="请输入手机号"/>
            </Form.Item>

            <Form.Item
              name="code"
              rules={[
                { required: true, message: '请输入密码' },
                {
                    len: 6,
                    message: '请输入6位密码',
                    validateTrigger: 'onBlur'
                }
              ]}
            >
              <Input.Password placeholder="请输入密码" maxLength={6}/>
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}
export default Login
